/*
 * @description: 描述内容
 */



import { useReducer, useState, Reducer } from "react"
import { produce } from "immer"
interface Action{
    type:'add'|'edd',
}
interface Counter{
    num:number
}

function reducer(state: number, action: number) {
    switch (action) {

        case 1:
            return state + 1;
        case 2:
            return state + 2;

    }
    return state
}

function counterReducer(counter:Counter,action:Action){
     switch (action.type){
         case 'add':
            //counter.num+=1;
         //  return  counter    //状态变化后，还是同一个引用的话不会触发渲染更新
        //  return {num:counter.num}
            return produce(counter,(counter)=>{
                counter.num+=1;  // 使用produce时要把此写在produce的第二个参数回调函数的代码块中
            })
        case 'edd':
            //counter.num-=1;
            //  return  counter    //状态变化后，还是同一个引用的话不会触发渲染更新
            // return {num:counter.num}
            return produce(counter,(counter)=>{
                counter.num-=1;// 使用produce时可以把此写在produce的第二个参数回调函数的代码块中
            })
     }
}

function App() {
//体验useReducer和useState的写法差异和适用的不同场景
    const [num, setNum] = useState(0)
    const initState = 0;
    const [state, dispatch] = useReducer<Reducer<number, number>>(reducer, initState);
 //体验useReducer和useState的写法差异和适用的不同场景 end


    //验证状态的引用不换不会导致重新渲染以及为了返回一个新对象使用了immer返回一个新对象
  const [counter,dispatchCounter]=useReducer<Reducer<Counter,Action>>(counterReducer,{num:1})
    return (
        <div>
            <div onClick={() => setNum((num) => num + 1)}>{num}</div>
            <div onClick={() => dispatch(2)}>{state}</div>
            <div onClick={()=>dispatchCounter({type:'add'})}>{counter.num}</div>
        </div>
    )
}

export default App